﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>折叠菜单</title>
		<link rel="stylesheet" href="collapsemenu.css" />
	</head>

	<body>
		<div id="fold">
			<ul>
				<li>
					<a href="#">信息管理</a>
					<ul class="wrap">
						<li>
							<a href="#">未读信息</a>
						</li>
						<li>
							<a href="#">已读信息</a>
						</li>
						<li>
							<a href="#">信息列表</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">商品管理</a>
					<ul class="wrap">
						<li>
							<a href="#">商品添加</a>
						</li>
						<li>
							<a href="#">商品列表</a>
						</li>
						<li>
							<a href="#">商品分类</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">用户管理</a>
					<ul class="wrap">
						<li>
							<a href="#">权限设置</a>
						</li>
						<li>
							<a href="#">用户列表</a>
						</li>
						<li>
							<a href="#">重置密码</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<script src="../jquery-1.12.4.min.js"></script>
	    <script>
	    	/*1、设置ul的第一个li的.wrap元素display为block
	    	  2、ul中li的点击事件：
	    	    当前li的.wrap元素显示，其他兄弟li的.wrap元素隐藏*/
	    	$('#fold ul li:first').find('.wrap').css('display','block');
	    	
	    	//
	    	
	    	$('#fold ul li').click(
	    		function(){
	    			/*$(this).find('.wrap').css('display','block');*/
	    			$(this).find('.wrap').slideToggle(500);
	    			$(this).siblings('li').find('.wrap').css('display','none');
	    		}
	    	);
	    </script>
	</body>

</html>